<template>
  <el-container class="container-header">
    <el-header>
      <el-row>
        <el-col :span="24">
          <div class="title">和{{userInfo.name}}聊天中</div>
        </el-col>
      </el-row>
    </el-header>
    <el-main class="main">
      <scroll :data="chatHistroy" ref="scroll" class="chat-content">
        <ul ref="container">
          <li v-for="data in chatHistroy" :key="data._id">
            <div :class="data.mine ? 'chat-item chat-item-mine' : 'chat-item'">
              <img class="avatar" :src="data.fromUser.pic" />
              <div class="right-content">
                <p class="nickname one-line">{{data.fromUser.name}}</p>
                <div class="chat-text left-arrow">{{data.content}}</div>
              </div>
            </div>
          </li>
        </ul>
      </scroll>
    </el-main>
    <el-footer>
      <div class="chat-bottom">
        <el-input v-model="input" placeholder="请输入内容" class="input"></el-input>
        <el-button @click="send" class="btn">发送</el-button>
      </div>
    </el-footer>
  </el-container>
</template>

<script>
import Scroll from '@/components/modules/scroll/index'
import { getInfo } from '@/api/user'
import { getChatHistroy, addMsg } from '@/api/chat'
import { mapGetters } from 'vuex'
export default {
  props: ['uid'],
  components: {
    Scroll
  },
  data() {
    return {
      input: '',
      userInfo: {},
      chatHistroy: []
    }
  },
  computed: {
    ...mapGetters(['chatObj'])
  },
  methods: {
    // 发送消息
    async send() {
      if (this.input.trim() === '') {
        return
      }
      let o = {
        toUserId: this.uid,
        content: this.input
      }
      const res = await addMsg(o)
      this.afterCommit({
        content: this.input,
        fromUser: this.$store.state.userInfo,
        mine: true
      })
      this.input = ''
    },
    async getInfo() {
      const res = await getInfo({
        uid: this.uid
      })
      this.userInfo = res.data
    },
    async getChatHistroy() {
      const res = await getChatHistroy({
        toUser: this.uid
      })
      this.chatHistroy = res.data
    },
    afterCommit(obj) {
      this.chatHistroy.push(obj)
      this.$nextTick(() => {
        let Lis = this.$refs.container.querySelectorAll('li') // 查找所有li元素
        this.$nextTick(() => {
          this.$refs.scroll.scrollToElement(Lis[Lis.length - 1], 300) // 滑动到指定元素,设置动画300ms
        })
      })
    }
  },
  watch: {
    chatObj(newVal, oldVal) {
      if (newVal.fromUser._id === this.uid) {
        let obj = {
          content: newVal.content,
          fromUser: newVal.fromUser,
          mine: false
        }
        this.afterCommit(obj)
      }
    }
  },
  created() {
    this.getInfo()
    this.getChatHistroy()
  },
  updated() {
    this.$nextTick(() => {
      let Lis = this.$refs.container.querySelectorAll('li') // 查找所有li元素
      this.$refs.scroll.scrollToElement(Lis[Lis.length - 1], 300) // 滑动到指定元素,设置动画300ms
    })
  }
}
</script>

<style lang="scss" scoped>
.container-header {
  display: flex;
  max-width: 1200px;
  min-height: 600px;
  margin: 100px auto 0;
  background-color: #fff;
  .main {
    height: 500px;
    .chat-content {
      height: 100%;
      overflow: hidden;
    }
  }
  .title {
    text-align: center;
    color: slateblue;
    font-size: 20px;
    height: 60px;
    line-height: 60px;
  }
  .chat-item {
    display: flex;
    margin-top: 20px;
  }
  .avatar {
    width: 41px;
    height: 41px;
    border-radius: 4px;
    margin-left: 12px;
    margin-right: 12px;
  }
  .right-content {
    // flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .chat-item-mine {
    flex-direction: row-reverse;
  }
  chat-item-mine .right-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .chat-text {
    color: rgb(15, 15, 15);
    background-color: #fff;
    text-align: left;
    min-height: 40px;
    border-radius: 4px;
    font-size: 15px;
    position: relative;
    padding: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
    width: auto;
    max-width: 200px;
    word-break: break-all;
  }

  .chat-item-mine .chat-text {
    background-color: #94eb68;
  }

  .chat-item-mine .left-arrow::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    top: 7px;
    right: -8px;
    left: auto;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 10px solid #94eb68;
  }
  .chat-item-mine .left-arrow::before {
    display: none;
  }
  .left-arrow::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 7px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 10px solid #fff;
  }
  .one-line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nickname {
    color: rgb(103, 103, 103);
    font-size: 12px;
    text-align: left;
    max-width: 143px;
  }
  .chat-bottom {
    display: flex;
    .input {
      flex: 1;
    }
    .btn {
      width: 100px;
      height: 100%;
    }
  }
}
</style>
